<template>
    <div class="products">
        <div class="item" v-for="({id, name, file, price, old_price, discount_price, is_score, full_score_buy}, index) in products">
            <div class="recommend-item-class">
                <a class="main-area" @tap.stop.prevent="openPage('/views/product.html?isBiYao=' + isbiyao + '&id=' + id)">
                    <div class="img" :style="'background-image: url(' + webApiDomain + '/public/uploads/' + file.savepath + file.savename + ');'"></div>
                    <div class="labels-area"></div>
                    <div class="title">{{name}}</div>
                    <div class="buy-line" @tap.stop.prevent="openSelect(index)">
                        <template v-if="is_score">
                            <div v-if="full_score_buy === 0" class="price">￥{{ (old_price / 100).toFixed(2) }}
                                <span class="score">+ 积分{{ (discount_price / 100 * 10).toFixed(0) }}</span>
                            </div>
                            <div v-else class="price score">积分{{ (discount_price / 100 * 10).toFixed(0) }}</div>
                        </template>
                        <template v-else>
                            <div class="price">￥{{ (price / 100).toFixed(2) }}</div>
                        </template>
                        <!--<div class="shop-car"></div>-->
                    </div>
                </a>
                <!--<div class="remark-border">-->
                    <!--<div class="remark">-->
                        <!--<span class="remark-type" style="color: #2683FF">[用户评论]</span>-->
                        <!--<span class="remark-text">推荐该商品，点击查看-->
                        <!--</span>-->
                    <!--</div>-->
                <!--</div>-->
            </div>
        </div>
    </div>
</template>

<script>

import { apiDomain } from 'assets/js/Lib'

export default {
    data() {
        return {
            myProducts: []
        }
    },
    computed: {
        webApiDomain: function () {
            return apiDomain;
        }
    },
    components: {

    },
    props: {
        products: {
            type: Array,
            default: []
        },
        isbiyao: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        // products: function () {
        //     if (this.products.length > 0) this.myProducts = this.products
        // }
    },
    //实例初始化最之前，无法获取到data里的数据
    beforeCreate() {
    },
    //在挂载开始之前被调用
    beforeMount() {
    },
    //已成功挂载，相当ready()
    mounted() {
    },
    //相关操作事件
    methods: {
        openPage: function (url) {
            let pageConfig = {
                "id": url,
                "url": url,
                show: {
                    autoShow: true
                },
                waiting: {
                    title: '加载中...'
                }
            }
            if (!url) {
                pageConfig.id = "building"
                pageConfig.url = "building.html"
            }

            mui.openWindow(pageConfig)
        },
        openSelect: function (index) {
            this.$emit('selectProduct', index)
        }
    }
}
</script>

<style lang="less">
.products {
    * {
        box-sizing: content-box !important;
    }
    width: 100vw;
    overflow: hidden;
    .item {
        width: 49vw;
        float: left;
        &:nth-child(2),
        &:nth-child(2n) {
            float: right;
            .recommend-item-class {
                float: right;
            }
        }

        div {
            overflow: hidden;
        }
    }
}

.recommend-item-class {
    width: 100%;
    text-align: left;
    border: .0275066667rem solid #EDEDED;
    background-size: 100% 8.8rem;
    position: relative;
    margin: 0;
    margin-top: .3333333333rem;

    .main-area {
        display: block;
        width: 100%;
    }

    .img {
        background: rgba(0, 0, 0, .03);
        background-size: cover !important;
        width: 49vw;
        height: 49vw;
        background-position: top center;
        background-repeat: no-repeat;
        margin: 0 auto;
    }

    .labels-area {
        position: absolute;
        height: 18px;
        top: 4.1333333333rem;
        margin-left: .3466666667rem;
        overflow: hidden;
    }

    .title {
        padding: .2666666667rem .3333333333rem 0;
        font-family: PingFangSC-Regular;
        font-size: .3733333333rem;
        color: #3E3E3E;
        overflow: hidden;
        height: 1.12rem;
        line-height: .56rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
    }

    .buy-line {
        height: .5066666667rem;
        padding: .2266666667rem .2666666667rem .1866666667rem .3466666667rem;

        .price {
            font-size: .4266666667rem;
            line-height: .4266666667rem;
            color: #da0029;
            float: left;
            &.score {
                color: #333;
            }
        }

        .score {
            color: #333;
            font-size: .33333333333rem;
            line-height: .4266666667rem;
        }

        .shop-car {
            width: .5066666667rem;
            height: .5066666667rem;
            background: url('');
            background-size: contain;
            float: right;
            margin: auto;
            opacity: .3;
        }
    }

    .remark-border {
        border-top: .0275066667rem dashed #DCDCDC;
        padding: .16rem .2933333333rem;
        background-size: cover;
        height: .8533333333rem;
    }

    .remark {
        height: .8833333333rem;
        overflow: hidden;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: .4266666667rem;

        .remark-type {
            font-size: .32rem;
        }
        .remark-text {
            font-size: .32rem;
            color: #444;
            letter-spacing: 0;
            word-break: break-all;
        }
    }
}
</style>
